<?xml version="1.0" encoding="UTF-8" ?>

<html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:c="http://java.sun.com/jsp/jstl/core"
          xmlns:p="http://primefaces.org/ui"
      	  xmlns:ui="http://java.sun.com/jsf/facelets"
      	  xmlns:t="http://myfaces.apache.org/tomahawk">
      	
      	
		<h:body>
    	<ui:composition template="../../templates/general.xhtml">
      		<ui:define name="content">
      		
      			<f:event type="preRenderView" listener="#{gruposBean.init}" />
				
				<h1 class="page-header">
					<i class="fa fa-users fa-3"></i> Grupos
				</h1>
				
      			<p:growl id="msgs" showDetail="true"/>
      			
      			<p:menuButton id="menuGrupo" value="Opções" style="float:right;">
        			<p:menuitem value="Gravar" action="#{gruposBean.gravarEditar}" process="@this :form:gruposTable" update=":form:msgs :form:gruposTable" icon="ui-icon-disk" rendered="#{!gruposBean.disableComponent}"/>
        			<p:menuitem value="Editar" action="#{gruposBean.editar}" process="@this" update=":form:msgs :form:gruposTable :form:menuGrupo" icon="ui-icon-arrowrefresh-1-w" rendered="#{gruposBean.disableComponent}"/>
        			<p:menuitem value="Novo Grupo" action="#{gruposBean.novo}" oncomplete="PF('grupoDlg').show();" icon="ui-icon-arrowrefresh-1-w"/>
    			</p:menuButton>
      			
      			<p:dataTable id="gruposTable" var="grupo" value="#{gruposBean.grupos}" style="margin-top:75px;"> 	
       				
       				<p:ajax event="rowToggle" onstart="test();" />
       				
       				<p:column style="width:45px; font-size: 0.9em;">
            			<p:rowToggler />
        			</p:column>
      				
      				<p:column headerText="Número" style="font-size: 0.9em;">
            			<h:outputText value="#{grupo.numero}" />
        			</p:column>
      				
      				<p:column headerText="Nº alunos" style="font-size: 0.9em;">
            			<h:outputText value="#{grupo.numAlunos}" />
        			</p:column>
        			
        			<p:column style="width:60px; font-size: 0.9em;">
						<p:commandButton icon="ui-icon-trash" title="Apagar grupo"
							style="font-size: 0.9em;"
							actionListener="#{gruposBean.apagar(grupo)}"
							update=":form:gruposTable :form:msgs" rendered="#{!gruposBean.disableComponent}">
							<p:confirm header="Confirmação"
								message="Tem a certeza que pretende eliminar este grupo?"
								icon="ui-icon-alert" />
						</p:commandButton>
					</p:column>
       				
       				<p:rowExpansion>
       					<h:panelGroup style="border:none;" id="formGrupo">
       						<p:panelGrid  columns="2" columnClasses="tableAlunoLabel,tableAlunoValue" style="margin-bottom:30px;">
       						
       							<h:outputText value="Número:" style="font-size: 0.9em;" />
                				<p:inputText value="#{grupo.numero}" disabled="#{gruposBean.disableComponent}" style="font-size: 0.9em;" />
                			
                			</p:panelGrid>
                			
                			<h4 class="page-header">
								Lista de Alunos do Grupo
							</h4>
                			
                			<h:panelGrid id="addAlunoGrid" columns="3" columnClasses="first,second,noBorder"
								style="margin-bottom:10px;"
								rendered="#{!gruposBean.disableComponent}">
								
								<h:outputLabel value="Escolha um aluno: " for="addAluno"
									rendered="#{!gruposBean.disableComponent}"
									style="font-size: 0.9em;" />
								<p:autoComplete value="#{gruposBean.alunoSeleccionado}"
									id="addAluno" completeMethod="#{gruposBean.completeAluno}"
									style="font-size: 0.9em;" var="a" itemLabel="#{a.numero}"
									itemValue="#{a}" converter="#{alunoConverter}"
									forceSelection="true"
									rendered="#{!gruposBean.disableComponent}">
									<p:column>
                    					#{a.numero} - #{a.nome}
                					</p:column>
								</p:autoComplete>
								<p:commandButton value="Adicionar" update=":form:msgs dataTableAlunos"
									action="#{gruposBean.adicionarAluno(grupo)}"
									style="margin-left: 10px; font-size: 0.9em;"
									process="@this addAlunoGrid" />
							</h:panelGrid>
       					
       						<h:panelGrid columns="1"  columnClasses="noBorder">
       							<p:dataTable id="dataTableAlunos" var="aluno" value="#{grupo.alunos}">

									<p:column style="font-size: 0.9em;">
										<f:facet name="header">  
                							Número 
            							</f:facet>
										
										<h:outputText value="#{aluno.numero}" />
									</p:column>

									<p:column style="font-size: 0.9em;">
										<f:facet name="header">  
                							Email 
            							</f:facet>
										
										<h:outputText value="#{aluno.email}" />
									</p:column>

									<p:column>
										<p:commandButton icon="ui-icon-trash"
											title="Eliminar aluno do grupo" style="font-size: 0.9em;"
											actionListener="#{gruposBean.eliminarAluno(grupo,aluno)}"
											update=":form:msgs dataTableAlunos"
											rendered="#{!gruposBean.disableComponent}">
											
											<p:confirm header="Confirmação"
												message="Tem a certeza que pretende eliminar este aluno do grupo?"
												icon="ui-icon-alert" />
										</p:commandButton>
									</p:column>
								</p:dataTable>
					
       						</h:panelGrid>
       					</h:panelGroup>
       				</p:rowExpansion>
        			
      			</p:dataTable>
      		
      			<p:confirmDialog global="true" showEffect="fade" hideEffect="fade"
					style="font-size: 0.9em;">
					<p:commandButton value="Sim" type="button"
						styleClass="ui-confirmdialog-yes" icon="ui-icon-check"
						style="font-size: 0.9em;" />
					<p:commandButton value="Não" type="button"
						styleClass="ui-confirmdialog-no" icon="ui-icon-close"
						style="font-size: 0.9em;" />
				</p:confirmDialog>
      		
      			<p:dialog header="Novo Grupo" widgetVar="grupoDlg" modal="true" resizable="false" width="600">
      				<h:panelGroup style="border:none;" id="formNovoGrupo">
       					<p:panelGrid  columns="2" columnClasses="tableAlunoLabel,tableAlunoValue" style="margin-bottom:30px;">
       						
       							<h:outputText value="Número:" style="font-size: 0.9em;" />
                				<p:inputText value="#{gruposBean.novoGrupo.numero}" style="font-size: 0.9em;" />
                			
                			</p:panelGrid>
                			
                			<h4 class="page-header">
								Lista de Alunos do Grupo
							</h4>
                			
                			<h:panelGrid id="addAlunoGridNovo" columns="3" columnClasses="first,second,noBorder"
								style="margin-bottom:10px;">
								
								<h:outputLabel value="Escolha um aluno: " for="addAlunoNovo"
									style="font-size: 0.9em;" />
								<p:autoComplete value="#{gruposBean.alunoSeleccionado}"
									id="addAlunoNovo" completeMethod="#{gruposBean.completeAluno}"
									style="font-size: 0.9em;" var="a" itemLabel="#{a.numero}"
									itemValue="#{a}" converter="#{alunoConverter}"
									forceSelection="true">
									<p:column>
                    					#{a.numero} - #{a.nome}
                					</p:column>
								</p:autoComplete>
								<p:commandButton value="Adicionar" update=":form:msgs dataTableAlunosNovo"
									action="#{gruposBean.adicionarAluno(gruposBean.novoGrupo)}"
									style="margin-left: 10px; font-size: 0.9em;"
									process="@this addAlunoGridNovo" />
							</h:panelGrid>
       					
       						<h:panelGrid columns="1"  columnClasses="noBorder">
       							<p:dataTable id="dataTableAlunosNovo" var="aluno" value="#{gruposBean.novoGrupo.alunos}">

									<p:column style="font-size: 0.9em;">
										<f:facet name="header">  
                							Número 
            							</f:facet>
										
										<h:outputText value="#{aluno.numero}" />
									</p:column>

									<p:column style="font-size: 0.9em;">
										<f:facet name="header">  
                							Email 
            							</f:facet>
										
										<h:outputText value="#{aluno.email}" />
									</p:column>

									<p:column>
										<p:commandButton icon="ui-icon-trash"
											title="Eliminar aluno do grupo" style="font-size: 0.9em;"
											actionListener="#{gruposBean.eliminarAluno(gruposBean.novoGrupo,aluno)}"
											update=":form:msgs dataTableAlunosNovo"/>
									</p:column>
								</p:dataTable>
       						</h:panelGrid>
       					</h:panelGroup>
       					
       					<p:commandButton id="gravarNovo" value="Gravar" process="@this :form:formNovoGrupo" action="#{gruposBean.gravarNovo}" oncomplete="PF('grupoDlg').hide();" update=":form:msgs :form:gruposTable" style="margin-top:10px; font-size: 0.9em;" />
       					<p:commandButton id="cancelarNovo" value="Cancelar" action="#{gruposBean.novo}" oncomplete="PF('grupoDlg').hide();" style="font-size: 0.9em; margin-top:10px; margin-left:10px;" />
      			</p:dialog>
      		
      			<script type="text/javascript">
    				function test(){
        				var i = $('.ui-row-toggler.ui-icon-circle-triangle-s').length;
        				if(i == 1){return;}
            				$('.ui-row-toggler.ui-icon-circle-triangle-s').trigger('click');
    				}
				</script>
      		
      		</ui:define>
      		
      	</ui:composition>	      	
    </h:body>  	  
</html>      	  